<template>
	<view class="">
		<view class="top-con flex-row">
			<view class="flex-col fill items-center justify-center">
				<view class="">
					<text class="top-s">￥</text>
					<text class="top-m">{{balance}}</text>
				</view>
				<view class="top-t">账户余额</view>
			</view>
			<view class="flex-col fill items-center justify-center">
				<view class="">
					<text class="top-s">￥</text>
					<text class="top-m">{{commission}}</text>
				</view>
				<view class="top-t">赠送余额</view>
			</view>
			<view class="top-f"></view>
		</view>
		<view class="">
			<view class="item-con flex-row items-center justify-between" @click="navTo('/pages/tabs/chong')">
				<view class="item-title">账户充值</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
			<view class="item-con flex-row items-center justify-between" @click="navTo('/pages/myself/card')">
				<view class="item-title">账户明细</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
			<view class="item-con flex-row items-center justify-between" @click="handleOpen">
				<view class="item-title">退款</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
			<view class="item-con flex-row items-center justify-between" @click="navTo('/pages/myself/bonus')">
				<view class="item-title">奖励金明细</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
			<view class="item-con flex-row items-center justify-between" @click="show = true">
				<view class="item-title">绑定电卡</view>
				<view class="flex-row items-center justify-between">
					<view class="" style="margin-right: 20rpx;">
						{{userInfo.field2 || ''}}
					</view>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="600" :border-radius="20">
			<view class="popup">
				<view class="top">
					<view class="title">
						绑定卡号
					</view>
				</view>
				<view class="content">
					<view class="input">
						<input v-model="card" type="text" placeholder="请输入" />
					</view>
					<view class="foot items-center justify-between">
						<view class="btn btn-1" @tap="show = false">
							取消
						</view>
						<view class="btn" @tap="handleConfirm">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<model isModel="3" ref="model" @refund="refundFn" :info="{
			title:'确认退款？',
			content:'账户余额将原路返还，赠送余额将清零',
			btn:'再想想',
			btnTwo:'确定'
		}"></model>
	</view>
</template>

<script>
	import model from "@/components/modal/model.vue"
	export default {
		components: {
			model
		},
		data() {
			return {
				balance: 0,
				commission: 0,
				userInfo: {},
				show: false,
				card: ''
			};
		},
		onLoad(options) {
			this.balance = options.balance;
			this.commission = options.commission;
			this.getUserInfo()
		},
		methods: {
			handleOpen(){
				if(Number(this.userInfo.balance) == 0) return
				this.$refs.model.open() 
			},
			async refundFn() {
				let res = await this.$request('user/withdraw-refund', {
					uid: uni.getStorageSync('uid')
				})
				if (res.result == '0') {
					this.$util.msg('退款成功')
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			async getUserInfo() {
				const res = await this.$request('user/info', {
					uid: uni.getStorageSync('uid')
				});
				if (res.result == 0) {
					this.userInfo = res.data;
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			async handleConfirm() {
				if (!this.card) return this.$util.msg('请输入卡号')
				const res = await this.$request('user/band-card', {
					uid: uni.getStorageSync('uid'),
					card: this.card
				});
				if (res.result == 0) {
					this.show = false
					this.$util.msg('绑定成功')
					this.getUserInfo()
				} else {
					this.$util.msg(res.resultNote);
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.top-con {
		height: 220rpx;
		background: $uni-color-bg;
		color: #ffffff;
		position: relative;
	}

	.top-f {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 0;
		border-bottom: 10rpx solid #ffffff;
		border-top: 10rpx solid transparent;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
	}

	.top-s {
		font-size: 30rpx;
	}

	.top-m {
		font-size: 54rpx;
		font-weight: 600;
	}

	.top-t {
		font-size: 26rpx;
	}

	.item-con {
		height: 111rpx;
		background: #ffffff;
		border: 1rpx solid rgba(218, 218, 218, 0.18);
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.popup {
		.top {
			width: 600rpx;
			position: relative;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;
			height: 130rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 65rpx;
				text-align: center;
				padding-top: 50rpx;
			}
		}

		.content {
			width: 600rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 99;
			padding: 30rpx;

			.input {
				background: #F3F3F3;
				border-radius: 16rpx;
				padding: 20rpx 30rpx;
			}

			.foot {
				margin-top: 30rpx;

				.btn {
					width: 200rpx;
					height: 70rpx;
					background: $uni-color-bg;
					border-radius: 47rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: center;
					margin: 0 auto;
				}

				.btn-1 {
					background: #fff;
					border: 1rpx solid $uni-color-bg;
					color: $uni-color-bg;
				}
			}
		}
	}
</style>